<template>
	<view>
		<navbar title="饿了么外卖返利" color="#fff" bgColor="transparent" :isZhanwei="false"></navbar>
		<view class="head-box" :style="{background:`url('${imgs.home.elm}')`}">
			<view class="logo">
				<image :src="imgs.logos.elm" mode=""></image>
			</view>
			<view class="text">领红包，拿返现</view>
			<!-- 	<view class="search-box">
				<view class="left-box">
					<u-icon color="#CCCCCC" style="margin-right: 16rpx;" name="search"></u-icon>
					<text>搜索搜索饿了么商品</text>
				</view>
				<view class="right-box">
					搜索
				</view>
			</view> --> 
			<view class="setup-box">
				<view class="setup-title">复制饿了么商品链接，领返利</view>
				<view class="setups">
					<view class="item">
						<image :src="imgs.logos.lhb" mode=""></image>
						<view class="item-info">
							<view>点击下方按钮</view>
							<view>领取红包</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.logos.elm" mode=""></image>
						<view class="item-info">
							<view>跳转到饿了么</view>
							<view>点外卖</view>
						</view>
					</view>
					<view class="items">
						<image :src="imgs.arrow" mode=""></image>
					</view>
					<view class="item">
						<image :src="imgs.logo" mode=""></image>
						<view class="item-info">
							<view>回名购岛领返现</view>
							<view>（均返1.5元）</view>
						</view>
					</view>
				</view>
			
				<div class="setup-btns">
					<div class="app" @click="toElmEvent" >饿了么APP</div>
					<!-- <div class="wechat">饿了么小程序</div> -->
				</div>
			</view>
		</view>

		<!-- 	<div class="good-boxs">
			<div class="title">返利推荐</div>
			<div v-if="list.length" >
				<good v-for="item in list" :key="item" ></good>
			</div>
			<div v-else style="padding-top: 100rpx;">
				<u-empty margin-top="50rpx" mode="list"></u-empty>
			</div>
		</div> -->
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	import good from '../components/good/index.vue'
	import navbar from '../components/w-navbar/index.vue'
	export default {
		components: {
			navbar,
			good
		},
		data() {
			return {
				imgs,
				list: [1, 2, 3],
			};
		},
		methods:{
			async toElmEvent(){
				const res = await this.$api.elmApi.getSortLink()
				plus.runtime.openURL(res.data.response.app_promotion.deep_link)
				console.log(res.data.response.app_promotion.deep_link,'xxxxxxxxxxxx');
			}
		},
		onShow() {
			// uni.showModal({
			// 	title: '温馨提示',
			// 	content: '该功能暂未开放，敬请期待!',
			// 	showCancel: false,
			// 	success({
			// 		confirm
			// 	}) {
			// 		if (confirm) {
			// 			uni.switchTab({
			// 				url: '/pages/index/index'
			// 			})
			// 		}
			// 	}
			// })
		}
	}
</script>

<style lang="scss" scoped>
	.head-box {
		height: 750rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
		// box-sizing: border-box;
		// padding-top: 180rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.logo {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 24rpx;

			>image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-bottom: 24rpx;
		}

		.search-box {
			width: 630rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 36rpx;
			padding: 8rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.left-box {
				font-weight: 500;
				font-size: 28rpx;
				color: #CCCCCC;
			}

			.right-box {
				width: 160rpx;
				height: 56rpx;
				background: #FF8C19;
				border-radius: 36rpx;
				font-weight: 500;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FFFFFF;
			}
		}

		.setup-box {
			position: absolute;
			bottom: -180rpx;
			width: 702rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			flex-direction: column;

			.setup-title {
				font-weight: bold;
				font-size: 28rpx;
				color: #333130;
				margin-bottom: 40rpx;
			}
			
			.setup-btns{
				display: flex;
				align-items: center;
				justify-content: center;
				.app{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					background-color: #FF9D3A;
					width: 262rpx;
					height: 72rpx;
					border-radius: 36rpx;
					margin-right: 16rpx;
				}
				.wechat{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					background-color: #FD3052 ;
					width: 262rpx;
					border-radius: 36rpx;
					height: 72rpx;
				}
			}

			.setups {
				display: flex;
				align-items: center;
			margin-bottom: 102rpx;
				>.item {
					flex: 1;
					margin-right: 18rpx;
					position: relative;

					>image {
						width: 96rpx;
						height: 96rpx;
					}

					>.item-info {
						position: absolute;
						bottom: -70rpx;
						font-weight: 400;
						font-size: 24rpx;
						left: -50%;
						width: 200rpx;
						color: #666260;
						text-align: center;

						>view {
							>text {
								color: #FF8C19;
							}
						}
					}
				}

				.items {
					flex: 1;
					margin-right: 18rpx;

					>image {
						width: 86rpx;
						height: 20rpx;
					}
				}
			}
		}
	}


	.good-boxs {
		margin-top: 160rpx;

		// background-color: #fff;
		.title {
			font-weight: bolder;
			font-size: 36rpx;
			color: #333130;
			text-align: center;
			margin-bottom: 36rpx;
		}
	}
</style>